<template>
  <view :data-theme="globPrimary">
    <u-navbar title="成为机构"></u-navbar>
    <view class="teacher-wrapper">
      <view class="teacher-view">
        <u-cell-group :border="false">
          <u-cell-item
            title="当前用户"
            :value="userInfo.nick_name"
            :arrow="false"
            hover-class="none"
            :value-style="{
              color: '#606266',
            }"
            label="*该帐号将成为机构管理员"
          ></u-cell-item>
          <u-cell-item
            title="认证状态"
            :value="authStatusText"
            :arrow="false"
            :border-bottom="false"
            hover-class="none"
            :value-style="{
              color: className[authStatus],
            }"
          ></u-cell-item>
          <u-gap height="10" bg-color="#F7F7F7"></u-gap>
          <u-cell-item
            title="机构名称"
            :value="authInfo.title"
            :arrow="false"
            hover-class="none"
            :value-style="{
              color: '#606266',
            }"
          ></u-cell-item>
          <u-cell-item
            title="所属分类（行业）"
            value="请选择"
            :border-bottom="false"
            hover-class="none"
            @click="show = true"
          ></u-cell-item>
          <view class="u-border-bottom category">
            <view class="item" v-for="(item, index) in authInfo.selected_category" :key="index">
              <text class="text u-line-1">{{ item.text }}</text>
            </view>
          </view>
          <u-cell-item title="LOGO" :arrow="false" hover-class="none">
            <view slot="right-icon"
              ><u-image
                width="100rpx"
                height="100rpx"
                shape="circle"
                :src="authInfo.logo_url"
              ></u-image
            ></view>
          </u-cell-item>
          <u-cell-item
            title="机构简介"
            :value="authInfo.intro"
            :arrow="false"
            hover-class="none"
            :value-style="{
              color: '#606266',
            }"
          ></u-cell-item>
          <u-cell-item
            title="联系电话"
            :value="authInfo.telephone"
            :arrow="false"
            hover-class="none"
            :value-style="{
              color: '#606266',
            }"
          ></u-cell-item>
          <u-cell-item
            title="联系地址"
            :value="authInfo.address"
            :arrow="false"
            hover-class="none"
            :value-style="{
              color: '#606266',
            }"
          ></u-cell-item>
          <u-cell-item
            title="身份证正反面"
            :arrow="false"
            :border-bottom="false"
            hover-class="none"
          ></u-cell-item>
          <view class="upload">
            <view class="item"
              ><u-image
                width="338rpx"
                height="213rpx"
                :src="authInfo.legal_IDcard_positive_url"
              ></u-image
            ></view>
            <view class="item"
              ><u-image
                width="338rpx"
                height="213rpx"
                :src="authInfo.legal_IDcard_side_url"
              ></u-image
            ></view>
          </view>
          <u-cell-item
            title="营业执照"
            :arrow="false"
            :border-bottom="false"
            hover-class="none"
          ></u-cell-item>
          <view class="upload">
            <view class="item"
              ><u-image
                width="338rpx"
                height="338rpx"
                :src="authInfo.business_license_url"
              ></u-image
            ></view>
          </view>
        </u-cell-group>
      </view>
      <view class="teacher-bottom" v-if="authStatus == 3">
        <edu-button type="primary" @click="nextStep">重新提交</edu-button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      className: ['#909399', '#67c23a', '#909399', '#f54030', '#303133'],
      check: true,
      authInfo: {},
      authStatus: 0,
      authStatusText: '',
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
  },
  mounted() {
    this.getData()
  },
  options: { styleIsolation: 'shared' },
  methods: {
    getData() {
      this.$edu.api.getSchoolAuth().then((res) => {
        const { data } = res
        this.authInfo = data.auth_info
        this.authStatus = data.auth_status
        this.authStatusText = data.auth_status_text
      })
    },
    // 下一步
    nextStep() {
      this.$u.route({
        type: 'redirectTo',
        url: '/pageUser/user/list/operation/school/create',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.teacher-wrapper {
  .teacher-view {
    padding-bottom: 20rpx;
    background-color: #ffffff;
    /deep/.u-cell {
      width: calc(100% - 30rpx);
      margin-left: 30rpx;
      padding-left: 0;
      .u-cell_title {
        color: $edu-main-color;
      }
      .u-cell__value {
        color: #b7bac1;
      }
      .u-cell__right-icon-wrap {
        color: #dcdfe6;
      }
    }
    .u-field {
      padding: 29rpx 32rpx;
    }
    .category {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-left: 30rpx;
      padding-right: 30rpx;
      .item {
        display: flex;
        margin-left: 24rpx;
        margin-bottom: 32rpx;
        padding: 5rpx 10px;
        background: #f1f1f1;
        border-radius: 32px;
        font-weight: 400;
        color: $edu-content-color;
        .text {
          font-size: 26rpx;
          max-width: 240rpx;
        }
        .close {
          margin-left: 10rpx;
          font-size: 18rpx;
        }
      }
    }
    .upload {
      display: flex;
      flex-wrap: wrap;
      padding-left: 20rpx;
      .item {
        padding: 0 10rpx;
      }
      /deep/.u-list-item {
        margin: 0;
      }
    }
  }
  .teacher-bottom {
    padding: 50rpx 30rpx 20rpx;
  }
}
</style>
